<template>
  <el-form-item :label-width="item.labelWidth?item.labelWidth:'130px'" :label="item.title" :prop="rules?item.field:''">
    <span slot="label">{{item.title}}
        <el-tooltip v-if="item.info" :content="item.info" placement="top">
          <span class="fas fa-info-circle color"></span>
        </el-tooltip>
      </span>
    <!-- <el-input v-model="form[item.field]" :disabled="disabled"></el-input> -->
    <el-tree
      :data="permissionTree"
      show-checkbox
      node-key="permId"
      @check = "checkChange"
      :default-checked-keys="checked"
      :props="defaultProps">
    </el-tree>
  </el-form-item>
</template>

<script>
import {
  getRolesAllPermission,
  getRolesPermission
} from '@/beneform4j/api/role';
export default {
  // name: 'text'
  props: ['item', 'form', 'rules', 'disabled', 'roleId'],
  data() {
    return {
      permissionTree: [],
      checked: [],
      permissionValue: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      }
    };
  },
  mounted: function() {
    if (this.form && this.form.roleId) {
      getRolesPermission(this.form.roleId).then(response => {
        this.permissionTree = response.data;
        /**
         * 递归取出选中状态节点
         * 树节点选中回显
         */
        this.dealTreeItem(this.permissionTree);
        // console.log(this.checked)
      });
    } else {
      getRolesAllPermission().then(response => {
        this.permissionTree = response.data;
      });
    }
  },
  methods: {
    dealTreeItem: function(children) {
      children.forEach(item => {
        if (item.hasChecked === 1) {
          this.permissionValue.push(item);
          if (item.leaf === true) {
            this.checked.push(item.permId);
          }
        }
        if (item.children && item.children.length > 0) {
          this.dealTreeItem(item.children);
        }
      });
      this.form[this.item.field] = this.permissionValue;
    },
    checkChange: function(item, checkObj) {
      this.permissionValue = [];
      checkObj.checkedNodes.forEach(v => {
        const objItem = {
          permId: v.permId,
          dataLevel: v.dataLevel
        };
        this.permissionValue.push(objItem);
      });
      checkObj.halfCheckedNodes.forEach(v => {
        const objItem = {
          permId: v.permId,
          dataLevel: v.dataLevel
        };
        this.permissionValue.push(objItem);
      });
      this.form[this.item.field] = this.permissionValue;
    }
  }
};
</script>

<style>

</style>
